/* Graceful fallback for <details> tags */
/* from http://mathiasbynens.be/notes/html5-details-jquery */

details, summary {
  display: block;
}

details {
  margin: 25px 0 0;

  /* Headings aren't valid in <summary>s, and it makes me sad. */
  &.h2 {
    > summary {
      font-family: @OpenSansLight;
      font-size: 26px;
      margin: 21px 0 8px;
    }
  }
}

/* The .no-details styles will get applied only if JavaScript is enabled and <details> is not natively supported. */

/* Add focus styles (for keyboard accessibility) */
.no-details {
  summary {
    &:focus {
      outline: dotted 1px;
    }

    &:hover {
      color: @textBlue;

      a {
        color: @textBlue;
      }
    }

    a {
      color: @textGrey;
    }
  }
}

/* The following styles are not really needed, since the jQuery script takes care of hiding/displaying the elements. */
/* However, we're still gonna use CSS as well to prevent FOUC in browsers that understand these selectors. */
/* Remember: by default (and probably most of the time), the contents of the <details> element are hidden. */

/* Hide all direct descendants of every <details> element */
/* Note that IE6 doesn't support the child selector; we'll work around that using jQuery later */
.no-details details > * {
  display: none;
}

/* Make sure summary remains visible, and apply a pointer cursor upon hover to indicate it's a clickable element */
.no-details {
  details {
    summary {
      cursor: pointer;
      display: block;
      margin: 10px 0 30px;
      padding: 0 0 0 30px;
      position: relative;

      &:before {
        background: transparent url(../img/wiki/bkg.collapsibles.png) no-repeat 5px 13px;
        content: '';
        height: 100%;
        left: 0;
        position: absolute;
        width: 30px;
      }
    }

    &.open {
      summary {
        &:before {
          background-position: 5px -37px;
        }
      }
    }
  }

  .html-rtl {
    details {
      summary {
        padding: 0 30px 0 0;

        &:before {
          left: auto;
          right: 0;
        }
      }
    }
  }
}
